<script setup>

import { ChatDotRound } from '@element-plus/icons-vue'
import { ref } from 'vue'

const testArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const likedList = ref(new Array(testArr.length).fill(false))
defineProps({
  QAData: {
    type: Object
  }
})
const limit = ref(3)
const handleLike = (index) => {
  likedList.value[index] = !likedList.value[index]
}
</script>

<template>
  <div class="QA">
    <div class="QA-title">
      <div class="QA-title-left">
        <div class="tag">
          <el-tag color="#39c5bb" round style="color: #ffffff">问题标签</el-tag>
        </div>
        <div class="title">该问题的描述问题描述</div>
      </div>
      <div class="QA-title-right" style="color: #39c5bb">
        <el-button :icon="ChatDotRound" style="color: #39c5bb" text>{{ 1 }}个回答</el-button>
        <div style="display: flex;justify-content: center;align-items: center;gap: 5px">
          <img alt="有用"
               height="16px" src="@/static/like.png"
               width="16px">{{ 2 }}个有用
        </div>
      </div>
    </div>
    <div class="QA-content">
      <div v-for="(item,index) in testArr.slice(0,limit)" class="QA-content-item">
        <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 10px">
          <el-avatar :size="50" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
          <el-text size="small">相关介绍</el-text>
        </div>
        <div class="answer">
          这里是问题的回答这里是问题的回答这里是问题的回答这里是问题的回答这里是问题的回答这里是问题的回答这里是问题的回答
        </div>
        <div v-show="!likedList[index]" class="like"
             @click="handleLike(index)">
          <img height="16px"
               src="@/static/like.png"
               width="16px" alt=""/>{{ 4 }}
        </div>
        <div v-show="likedList[index]" class="like"
             @click="handleLike(index)">
          <img height="16px"
               src="@/static/liked.png"
               width="16px" alt=""/>{{ 4 }}
        </div>
      </div>
      <div v-if="testArr.length>3"
           style="color: #39c5bb;display: flex;justify-content: flex-end;align-items:center;gap:5px;padding: 10px"
           @click="limit===3?limit=testArr.length:limit=3">
        {{ limit === 3 ? '展开全部' : '收起' }}
        <el-icon :style="{transform:limit===3?'':'rotate(-90deg)'}">
          <DArrowRight />
        </el-icon>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.QA {
  transition: all 0.5s ease-in-out;
  display: flex;
  flex-direction: column;

  &-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    &-left {
      display: flex;
      gap: 10px;
    }

    &-right {
      display: flex;
      gap: 20px;
    }
  }

  &-content {
    background-color: #f1f1f1;
    border-radius: 5px;
    transition: all 0.5s ease-in-out;

    &-item {
      display: flex;
      justify-content: space-between;
      padding: 10px;
      border-bottom: 1px solid #e1e1e1;

      .answer {
        flex: 1;
        margin-left: 10px;
        font-size: 12px;
        color: #666666;
        line-height: 20px;
        overflow: hidden;
        padding-top: 8px;
      }

      .like {
        display: flex;
        justify-self: flex-end;
        align-self: flex-end;
        justify-content: center;
        align-items: center;
        gap: 5px;
        color: $lt-main-text-color;
      }
    }
  }
}
</style>